<template>
  <div class="content-detail">
    <el-card class="card-box minh100">
      <template #header>
        <div class="card-box-header">
          <span>项目基本信息</span>
        </div>
      </template>
      <el-collapse-transition>
        <div>
          <el-form
            :model="basicInfoData"
            class="content-box"
            :rules="rules"
            ref="formDataRef"
            label-width="160px"
          >
            <el-form-item label="项目名称">
              <span class="text--info form-detail">{{
                basicInfoData?.projectName
              }}</span>
            </el-form-item>
            <el-form-item label="项目编号">
              <span class="text--info form-detail">{{
                basicInfoData?.projectCode
              }}</span>
            </el-form-item>
            <el-form-item label="项目类型">
              <span class="text--info form-detail">{{
                basicInfoData?.projectTypeName
              }}</span>
            </el-form-item>
            <el-form-item label="项目所属工厂">
              <span class="text--info form-detail">{{
                basicInfoData?.projectFactoryName
              }}</span>
            </el-form-item>
            <el-form-item label="项目负责人">
              <span class="text--info form-detail">{{
                basicInfoData?.projectLeaderName
              }}</span>
            </el-form-item>
            <el-form-item label="项目年度" prop="projectYear">
              <span class="text--info form-detail"
                >{{ basicInfoData?.projectYear }}年</span
              >
            </el-form-item>
            <el-form-item label="项目描述" prop="remarks">
              <el-input
                type="textarea"
                v-model.trim="basicInfoData.remarks"
                v-if="basicInfoData.remarks"
                :rows="3"
                disabled
              ></el-input>
              <span v-else class="text--info form-detail">-</span>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { storageLocal } from "/@/utils/storage";
import { getProjectInfo } from "/@/api/projects";

let basicInfoData = ref<object>({
  // projectCode: "项目编码code101",
  // projectLeaderId: "22",
  // projectLeaderName: "潘涛测试账号",
  // projectName: "A项目101",
  // projectTmpId: 1,
  // projectTypeCode: "B",
  // projectTypeName: "B类设备",
  // projectFactoryCode: "",
  // projectFactoryName: "",
  // projectYear: "2022",
  // remarks: "备注。。。"
}); // 信息

// 请求详情信息
const getDatailData = async () => {
  const id = storageLocal.getItem("projectInfo")?.id;
  if (!id) {
    return;
  }
  const params = {
    id: id
  };
  const { code, data } = await getProjectInfo(params);
  if (code === 200) {
    /*
     * warning：
     * const { acceptanceRecordList } = data;
     * 当进行解构时，会失去响应，导致子组件不能接收到数据
     * 可使用以下方法进行解决
     * const accept = toRef(data, "acceptanceRecordList");
     */
    basicInfoData.value = data;
  }
};

getDatailData();
</script>

<style lang="scss" scoped></style>
